<template>
	<view class="nav-bar" :style="{backgroundColor:bg}" :class="isMargin?'margin-str':''">
		<view class="nav-bar-block">
			<view class="left-option" @click="leftClick" v-if='leftIconShow'>
				<uni-icons type="left" :class="isMargin?'':'margin-left-icon'" :color="leftIconColor"
					size="26"></uni-icons>
			</view>
			<view class="center-txt-option" v-if="navBarTitleShow">
				<view class="title" :style="{color:navBarTitleColor}">{{navBarTitle}}</view>
			</view>
			<view class="right-option" :class="isMargin?'':'margin-str'" v-if="rightIconShow">
				<template v-if="rightIconType==1">
					<image src="../../static/index/loginTel.png" class="shaixuan-icon"  @click="rightIconClick"></image>
				</template>

				<template v-if="rightIconType==0" >
					<image src="../../static/index/telBack.png" class="shaixuan-icon"  @click="rightIconClick"></image>
				</template>

			</view>
		</view>
	</view>
</template>

<script>
	name: 'navBar'
	export default {
		props: {
			leftIconColor: {
				type: String,
				default: '#181818',
			},
			navBarTitleColor: {
				type: String,
				default: '#181818',
			},
			leftIconShow: {
				type: Boolean,
				default: true,
			},
			navBarTitleShow: {
				type: Boolean,
				default: true,
			},
			rightIconShow: {
				type: Boolean,
				default: true,
			},
			rightIconType: {
				type: Number,
				default: 0, //0 是图标 1是文字
			},
			iconTypeName: {
				type: String,
				default: 'none',
			},
			rightTxt: {
				type: String,
				default: '',
			},
			bg: {
				type: String,
				default: 'none'
			},
			navBarTitle: {
				type: String,
				default: 'none'
			},
			isMargin: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {

			}
		},
		methods: {
			leftClick() {
				this.$tools.pagesBack()
			},
			
			shareClick() {
				console.log('shareClick======')
				this.$emit('shareChange')
			},
			
			searChClick() {
				console.log('shareClick======')
				this.$emit('searChange')
			},
			
			shaiXuanClick() {
				console.log('shaiXuanClick======')
				this.$emit('shaiXuanChange')
			},
			
			rightIconClick(){
				console.log("rightIconClick======")
				this.$emit('rightIconChange')
			}
			
		}
	}
</script>

<style lang="scss">
	.margin-str {
		padding: 0 34rpx;
	}

	.margin-left-icon {
		padding-left: 34rpx;
	}

	.nav-bar {
		height: 90rpx;
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999;
		padding-bottom: 24rpx;

		.nav-bar-block {
			display: flex;
			align-items: center;
			height: 40rpx;
			position: relative;
			z-index: 111;
			width: 100%;

			.left-option {
				position: relative;
				z-index: 111;
			}

			.center-txt-option {
				z-index: 11;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: center;

				.title {

					font-size: 35rpx;
					font-weight: bold;
					color: #333333;
				}
			}

			.right-option {
				position: relative;
				z-index: 111;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				height: 100%;

				.share-type {
					margin-left: 38rpx;
					width: 38rpx;
					height: 38rpx;
				}

				.shaixuan-icon {
					width: 38rpx;
					height: 38rpx;
				}

				.search-icon {
					width: 35rpx;
					height: 35rpx;
					margin-left: 38rpx;
				}
			}
		}
	}
</style>